<template>
    <div :class="mHasScreenVertical? 'sScreenVertical':'sScreenHorizontal' " ref="wPointView">
        <div class="sParent">
            <div class="sImgP" ref="wImgPanel">
                <img :src="mData.bgImgUrl" class="sImg" ref="wImg" @load="mImgLoadSuccess" @error="mImgLoadError">
            </div>
            <div class="sPointP" v-show="mData.bgImgState===ImgLoadState.SUCCESS">
                <div v-for="(item,index) in mData.pointInfo?.pointDataHandle"
                    :style="{left: item.scaleX * 100 + '%',  top: item.scaleY * 100 + '%' }">
                    <i class="sPoint"
                        :class="{'sPoint_small':item.pointId !== mData.pointSelectId,'sPoint_big':item.pointId === mData.pointSelectId}"
                        :style="{backgroundImage:'url(' + (item.pointId === mData.pointSelectId ? item.pointRes.on : item.pointRes.off)+  ') '}" />
                </div>
            </div>
            <div class="sScreenChange" v-show="mData.bgImgState===ImgLoadState.SUCCESS" @click="screenChange">切换</div>
            <LoadingImgView ref="mPointLoading" />
        </div>
    </div>
</template>
<script setup lang="ts">
import { type DataExport, type DataWidget, naturalToReal, type ImageViewRealInfo } from './PointViewHelper';
import { computed, onBeforeUpdate, onMounted, onUpdated, reactive, ref } from 'vue';
import LoadingImgView from '@/widget/img/LoadingImgView.vue';
import { getAssetsFile } from '@/utils/YcAssetUtil';
import { ImgLoadState } from '@/data/constant/ImgLoadType';

let mDataExport = reactive<DataExport>({})
let mData = reactive<DataWidget>({})
const wPointView = ref<HTMLElement>();
const wImgPanel = ref<HTMLElement>();
const wImg = ref<HTMLImageElement>();
const mPointLoading = ref<InstanceType<typeof LoadingImgView>>()
const mHasScreenVertical = ref(true)
const screenChange = () => {
    mHasScreenVertical.value = !mHasScreenVertical.value
    mData.bgImgState = ImgLoadState.SCREEN_CHANGE
}
onUpdated(() => {
    if (mData.bgImgState === ImgLoadState.SCREEN_CHANGE) {
        // console.log("onUpdated");
        mData.bgImgState = ImgLoadState.SUCCESS
        initImgBg()
        initPointData()
    }
})
//图片加载
function loadImg() {
    if (mDataExport.imgUrl === null || mDataExport.imgUrl === undefined) {
        console.log("点位图片地址错误");
        mData.bgImgUrl = undefined
        mData.bgImgInfoNatural = undefined
        mData.bgImgInfoReal = undefined
        mData.pointInfo = undefined
        mData.pointSelectId = undefined
        mData.bgImgState = ImgLoadState.EMPTY
        mPointLoading.value?.setLoadState(ImgLoadState.EMPTY)
    } else if (mDataExport.imgUrl === mData.bgImgUrl) {
        mPointLoading.value?.setLoadState(ImgLoadState.LOADING)
        initPointData()
    } else {
        mData.bgImgUrl = mDataExport.imgUrl
        mData.bgImgInfoNatural = undefined
        mData.bgImgInfoReal = undefined
        mData.pointInfo = undefined
        mData.pointSelectId = undefined//无默认选中
        mData.bgImgState = ImgLoadState.LOADING
        mPointLoading.value?.setLoadState(ImgLoadState.LOADING)
    }
}
const mImgLoadSuccess = () => {
    mPointLoading.value?.setLoadState(ImgLoadState.SUCCESS)
    mData.bgImgState = ImgLoadState.SUCCESS
    mData.bgImgInfoNatural = {
        imgNaturalHeight: wImg.value!.naturalHeight,
        imgNaturalWidth: wImg.value!.naturalWidth,
    }
    console.log("图片原始数据", mData.bgImgInfoNatural);
    initImgBg()
    initPointData()
}
const mImgLoadError = () => {
    mData.bgImgState = ImgLoadState.ERROR
    mPointLoading.value?.setLoadState(ImgLoadState.ERROR)
    console.log("加载失败");
}
function initImgBg() {
    if (mHasScreenVertical.value) {
        mData.bgImgInfoReal = naturalToReal({
            imgNaturalHeight: mData.bgImgInfoNatural!.imgNaturalHeight,
            imgNaturalWidth: mData.bgImgInfoNatural!.imgNaturalWidth,
            imgWidgetHeight: wPointView.value!.clientHeight,
            imgWidgetWidth: wPointView.value!.clientWidth,
        })
    } else {
        mData.bgImgInfoReal = naturalToReal({
            imgNaturalHeight: mData.bgImgInfoNatural!.imgNaturalHeight,
            imgNaturalWidth: mData.bgImgInfoNatural!.imgNaturalWidth,
            imgWidgetHeight: wPointView.value!.clientHeight,
            imgWidgetWidth: wPointView.value!.clientWidth,
        })
    }

    console.log("图片数据", mData.bgImgInfoReal);
    wImg.value!.style.width = mData.bgImgInfoReal.imgRealWidth + "px"
    wImg.value!.style.height = mData.bgImgInfoReal.imgRealHeight + "px"
    wImg.value!.style.left = mData.bgImgInfoReal.left + "px"
    wImg.value!.style.top = mData.bgImgInfoReal.top + "px"
}
function initPointData() {
    mData.pointInfo = {
        pointDataHandle: mDataExport.pointData?.map(point => {
            return {
                pointId: point.pointId,
                scaleX: (point.scaleX * mData.bgImgInfoReal!.imgRealWidth + mData.bgImgInfoReal!.left) / mData.bgImgInfoReal!.imgWidgetWidth,
                scaleY: (point!.scaleY * mData.bgImgInfoReal!.imgRealHeight + mData.bgImgInfoReal!.top) / mData.bgImgInfoReal!.imgWidgetHeight,
                pointRes: point.pointRes
            }
        })
    }
    mPointLoading.value?.setLoadState(ImgLoadState.SUCCESS)
    console.log("点生成完成:", mData.pointInfo.pointDataHandle);
}

//外部调用
const resetData = (dataExport: DataExport) => {
    mDataExport = dataExport
    loadImg()
    console.log(`传入的数据:`, dataExport)
}
const selectPoint = (pointId: number) => {
    mData.pointSelectId = pointId
    console.log(`2222`)
}
const setLoadShowState = (loadState: ImgLoadState) => {
    mPointLoading.value?.setLoadState(loadState)
}
const setScreenHorizontal = () => {

}
defineExpose({
    resetData, selectPoint, setLoadShowState, setScreenHorizontal
})
</script>
<style scoped lang="scss">
/** 竖屏 */
.sScreenVertical {
    width: 100%;
    height: 211px !important;
    background-color: red;
}

/** 横屏 */
.sScreenHorizontal {
    position: fixed;
    top: 0;
    width: 100vh;
    height: 100vw !important;
    left: 100vw;
    z-index: 9999;
    background-color: blue;
    transform: rotate(90deg);
    transform-origin: 0% 0% 0;
}

.sParent {
    height: 100%;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.sImgP {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    top: 0;
    background: rgb(1, 1, 1);
}

.sImg {
    white-space: nowrap;
    display: inline-block;
    position: relative;
    height: 100%;
    width: 100%;
}

.sPointP {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    top: 0;
    z-index: 2;
}

.sPoint {
    position: absolute;
    background-color: rgba(0, 0, 0, 0);
    transform: translate(-50%, -50%);
    background-size: contain;
    background-position: center center;

    &_small {
        width: 15px;
        height: 15px;
    }
    &_big {
        width: 23px;
        height: 23px;
    }
}

.sScreenChange {
    position: absolute;
    right: 0px;
    bottom: 0px;
    width: 30px;
    height: 30px;
    z-index: 3;
}
</style>